<template>
    <div>
        <h1>路由跳转</h1>
        <ul>
            <li>
                this.$router.push/replace区别:路由是为了一个历史栈.push是新增进去.replace是替换
            </li>
            <li>传参的方式接收参数的方式</li>
            <li>
                query和params的区别:query参数拼接在地址栏类似get
                ,params参数不在地址栏刷新会消失.(不消失可以存本地,用三元运算符)
                name可以和query/params匹配 path 只能和query
                你用params传参.就用$route.params接收 用query传参 就用.query接收
            </li>
            <li>
                router
                和route什么区别:router是一个路由的实例对象.里面存储了路由的一些方法.比方说push/replace;
                route 是记录了当前路由的源信息对象
            </li>
        </ul>
        <button @click="pushRouter">push</button>
        <button @click="replaceRouter">replace</button>
    </div>
</template>

<script>
export default {
    // optionsAPI
    components: {},
    props: {},
    data() {
        return {};
    },
    computed: {},
    methods: {
        pushRouter() {
            // this.$router.push({ path: "/vuex", query: "路由参数" });
            // this.$router.push({ name: "vuex", query: "路由参数" });
            // this.$router.push({
            //     path: "/vuex",
            //     params: { username: "eduardo" }
            // });
            this.$router.push({
                name: "vuex",
                params: { username: "eduardo" }
            });
        },
        replaceRouter() {
            // this.$router.replace("/vuex");
        }
    },
    created() {},
    mounted() {}
};
</script>
<style scoped></style>
